/*eslint-disable*/
import Nav from "../components/Nav"
import styled from "styled-components"
import Zgn_money from "components/Zgn_money"
import Zgn_todolist from "components/Zgn_todolist"
import Zgn_tomato from "components/Zgn_tomato"
import { useState } from 'react';
import NewOption from "components/NewOption"
import useMoney from '../useMoney';
import useTodolist from 'useTodolist';
import useTomato from "useTomato"
import nowTime from '../nowTime';



require('../assets/icons/add.svg')
require('../assets/icons/logo.svg')

const Wrapper=styled.div`
    display:flex;
    flex-direction:column;
    height:100vh;
    
`
const Main=styled.div`
    flex-grow:1;
    overflow:auto;
    background:white;
  >.topNav{
    display:flex;
    padding:0px 30px;
    padding-top:20px;
    justify-content: space-between;
    align-items:center;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    background:#f3f3f3;
    >.logo{
        display:flex;
        align-items:center;
        >.icon{
            margin-right:10px;
            fill:#45496a;
        }
    }
  }
  >.bar{
    height:20px;
    width:100vw;
    border-radius:0px 0px 100px 100px;
    margin-bottom:30px;
    background:#f3f3f3;
  }
  
  >.home-content{
    padding:0px 15px;   
  }
`


const Home:React.FC =()=>{
    const {getMoney}=useMoney()
    const {getTodolist,setTodolist}=useTodolist()
    const {getTomato}=useTomato()
    let money=getMoney()
    let todolist=getTodolist()
    let tomato=getTomato()
    const[toggle,setToggle]=useState(false)
    const toggleBool=(a:boolean)=>{
        return !a 
    }
   

    return(
        <Wrapper>
            {toggle?<NewOption onChange={()=>{ setToggle(false) }} />:null }
            <Main>
                <div className="topNav">
                    <div className="logo"> 
                        <svg  className="icon" >
                            <use xlinkHref="#logo" />
                        </svg> 
                        <div>zgn</div>
                    </div>            
                    <svg  className="icon"  onClick={()=>{setToggle(toggleBool(toggle))}}>
                        <use xlinkHref="#add" />
                    </svg>
                </div>
                <div className="bar"></div>

                <div className="home-content">
                    {
                        tomato.map((items,index)=>{
                            return(
                                <Zgn_tomato tomato={items} key={index} />
                            )
                        })
                    }
                    {
                        todolist.map((items,index)=>{
                            if(items[nowTime()]){
                                return (
                                    <Zgn_todolist todolist={items} key={index} 
                                        onChange={(newVal:string,oldVal:string)=>{
                                        setTodolist(nowTime(),oldVal,newVal)}}/>
                                )
                            }
                            
                        })
                    }
                    {
                        money.map((items,index)=>{
                            if (items[nowTime()]){
                                return(<Zgn_money  money={items[nowTime()]}  key={index}/>)
                            }else{
                                return ''
                            }
                            
                        })
                    }
                    
                    
                    
                </div>
            </Main>
            <Nav></Nav>
        </Wrapper>
    )
}

export default Home;